﻿<%@ Page Title="Dia do Pastor" Language="C#" MasterPageFile="~/fotosMain.Master" AutoEventWireup="true" CodeBehind="DiaPastor.aspx.cs"
    Inherits="Presentation.Pages.DiaPastor" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Dia do Pastor</title>
    <link href="../Gallery/galeria.css" rel="stylesheet" type="text/css" />
    <script src="../Gallery/jquery.js" type="text/javascript"></script>
    <script src="../Gallery/jquery.galleria.pack.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $('.gallery_demo_unstyled').addClass('gallery_demo');
            $('ul.gallery_demo').galleria({
                history: true, // ativa a legenda da foto ampliada
                clickNext: true, // ativa o link sobre a imagem ampliada para a próxima
                insert: '#main_image', // nome do div onde aparecerá a imagem ampliada
                onImage: function (image, caption, thumb) {

                    // efeito na imagem e na legenda
                    if (!($.browser.mozilla && navigator.appVersion.indexOf("Win") != -1)) {
                        image.css('display', 'none').fadeIn(1000);
                    }
                    caption.css('display', 'none').fadeIn(1000);
                    var _li = thumb.parents('li');
                    _li.siblings().children('img.selected').fadeTo(500, 0.3);
                    thumb.fadeTo('fast', 1).addClass('selected');
                    // adiciona um título para a imagem ampliada
                    image.attr('title', 'Próxima imagem >>');
                },
                onThumb: function (thumb) {
                    var _li = thumb.parents('li');
                    var _fadeTo = _li.is('.active') ? '1' : '0.3';
                    // efeito ao carregar os thumbs
                    thumb.css({ display: 'none', opacity: _fadeTo }).fadeIn(1500);
                    // efeito ao colocar o mouse em cima do thumb
                    thumb.hover(
                    function () { thumb.fadeTo('fast', 1); },
                    function () { _li.not('.active').children('img').fadeTo('fast', 0.3); }
                )
                }
            });
        });
    </script>
    <link href="../styles.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Dia do Pastor" ForeColor="Blue"
        Font-Bold="True" Font-Italic="True" Font-Size="X-Large" Font-Underline="True"></asp:Label>
        <br />
        <br />
        <br />
    <div id="main_image">
    </div>
    <ul class="gallery_demo">
        <li class="active">
            <img src="../fotos/DiaDoPastor/SAM_0624.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0625.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0627.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0656.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0628.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0629.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0633.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0635.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0639.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0641.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0642.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0644.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0647.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0648.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0649.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0650.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0651.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0652.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0654.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
        <li><img src="../fotos/DiaDoPastor/SAM_0655.JPG" alt="Dia do Pastor" title="Dia do Pastor"/></li>
    </ul>
</asp:Content>
